<template>
  <div v-if="model">
    <div class="topbar px-3 py-2 d-flex bg-black text-white ai-center">
      <div>
        <img src="../assets/logo.png" alt="" height="30">
      </div>
      <div class="ml-2 flex-1">
        <span>王者荣耀</span>
        <span class="ml-2">攻略站</span>
      </div>
      <router-link to='/'>更多英雄 &gt;</router-link>
    </div>
    <!-- end of topbar -->

    <div class="topbody text-white" :style="`background-image:url('${model.banner}')`">
      <div class="banner px-3 py-3 d-flex flex-column jc-end">
        <div class="fs-xxs">{{model.title}}</div>
        <h2 class="py-1">{{model.name}}</h2>
        <div class="fs-xxs">{{model.categories.map(v=>v.name).join('/')}}</div>
        <div class="d-flex jc-between ai-center mt-2">
          <div class="scores d-flex ai-center">
            <span>难度</span>
            <span class="badge bg-primary">{{model.scores.difficult}}</span>
            <span>技能</span>
            <span class="badge bg-blue">{{model.scores.skill}}</span>
            <span>攻击</span>
            <span class="badge bg-danger">{{model.scores.attack}}</span>
            <span>生存</span>
            <span class="badge bg-dark">{{model.scores.existence}}</span>
          </div>
          <router-link to='/' tag="span">皮肤: 2 &gt;</router-link>
        </div>
      </div>
    </div>
    <!-- end of top -->

    <div>
      <div class="hero-body px-3 bg-white">
        <div class="nav d-flex jc-around pt-3 pb-2 border-bottom">
          <span class="nav-item active fs-xxs">英雄初识</span>
          <span class="nav-item fs-xxs">进阶攻略</span>
        </div>
        <swiper>
          <swiper-slide>
            <div>
              <div class="d-flex jc-around py-4 bg-white">
                <router-link to='/' class="d-flex btn btn-lg flex-1" tag='div'>
                  <strong><i class="iconfont icon-menu1 text-primary"></i></strong>
                  <div class="ml-1">英雄介绍视频</div>
                </router-link>
                <router-link to='/' class="d-flex btn btn-lg flex-1 ml-3" tag='div'>
                  <strong><i class="iconfont icon-menu1 text-primary"></i></strong>
                  <div class="ml-1">英雄介绍攻略</div>
                </router-link>
              </div>
              <!-- skill -->
              <div class="skill">
                <div class="d-flex jc-around">
                  <img :src="item.icon" v-for="(item, i) in model.skills" :key="item._id" width="55" height="55"
                    :class="{active: currentSkillIndex == i}" @click="currentSkillIndex=i">
                </div>
                <div v-if="currentSkill" class="py-4">
                  <div class="border-bottom">
                    <span><strong>{{currentSkill.name}}</strong></span>
                    <span class="ml-3">(冷却值:{{currentSkill.delay}} 消耗:{{currentSkill.useup}})</span>
                    <div class="py-3"><span>{{currentSkill.description}}</span></div>
                  </div>
                  <div class="py-3">
                    <span>小提示: {{currentSkill.tips}}</span>
                  </div>
                </div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!-- end of skill -->

    <m-card plain title="出装推荐" icon='menu1'>
      <div>顺风出装</div>
      <div class="d-flex items jc-around text-center mt-3 border-bottom pb-3">
        <div v-for="item in model.items1" :key="item._id">
          <div>
            <img :src="item.icon" alt="" width="45" height="45" class="icon">
            <div class="fs-xxs">{{item.name}}</div>
          </div>
        </div>
      </div>
    </m-card>
    <m-card plain title="逆风出装" icon='card-hero'>
      <div class="d-flex items jc-around text-center">
        <div v-for="item in model.items2" :key="item._id">
          <div>
            <img :src="item.icon" alt="" width="45" height="45" class="icon">
            <div class="fs-xxs">{{item.name}}</div>
          </div>
        </div>
      </div>
    </m-card>

    <m-card plain title="使用技巧" icon='menu1'>
      <div>{{model.useTips}}</div>
    </m-card>
    <m-card plain title="对抗技巧" icon='menu1'>
      <div>{{model.battleTips}}</div>
    </m-card>
    <m-card plain title="最佳搭档" icon='card-hero'>
      <div v-for="item in model.partner" :key="item.id" class="d-flex pt-2">
        <img :src="item.heroes.avatar" alt="" width="40" height="40">
        <div class="ml-2">{{item.description}}</div>
      </div>
    </m-card>
    <m-card title="精彩视频" icon='card-hero'></m-card>
    <m-card title="赛事竞技" icon='card-hero'></m-card>
    <m-card title="英雄分类" icon='card-hero'></m-card>
    <m-card title="英雄分类" icon='card-hero'></m-card>
    <m-card title="英雄分类" icon='card-hero'></m-card>
    <m-card title="英雄分类" icon='card-hero'></m-card>
    <m-card title="英雄分类" icon='card-hero'></m-card>
    <m-card title="英雄分类" icon='card-hero'></m-card>
  </div>
</template>

<script>
export default {
  props: {
    id: {},
  },
  computed: {
    currentSkill() {
      return this.model.skills[this.currentSkillIndex];
    },
  },
  data() {
    return {
      model: null,
      currentSkillIndex: 0,
    };
  },
  methods: {
    async fetchHero() {
      const res = await this.$http.get(`hero/${this.id}`);
      this.model = res.data;
    },
  },
  created() {
    this.fetchHero();
  },
};
</script>

<style lang="scss">
.topbody {
  height: 26vh;
  background: #fff no-repeat top center;
  background-size: 100%;
  .banner {
    height: 26vh;
    background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0, 1));
  }
  .scores {
    .badge {
      font-size: 0.6154rem;
      display: inline-block;
      text-align: center;
      width: 14px;
      border-radius: 50%;
      border: 1px solid #d4d9de;
      line-height: 13px;
      margin: 0 3px;
    }
  }
}

.skill img {
  border: 2px solid white;
  &.active {
    border-radius: 50%;
    border-color: #db9e3f;
  }
}
.items .icon {
  border-radius: 50%;
}
</style>